<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入css外部文件的方法 -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!--
        1.行级元素
            feature:内容决定元素所占位置
                    不可以通过css改变宽高
                    span strong em a del 伪元素
        2.块级元素
            feature: 独占一行
                     可以通过css改变宽高
                     div p ul li ol form address 
        
        3.行级块元素
            feature:内容决定大小
                    可以改变宽高
                    img
     -->

    <div></div>
    <span></span>


    <img src="./学习时间.png" alt="图片无法显示的时候出现" title="图片提示符">
    
    <ul type="circle"><!--无序列表  type="disc(实心圆，默认值) | square(方块) | circle(空心圆) "-->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- target="__black__"在新的标签页中打开 -->
    <a href="https://www.baidu.com" target="__black__">跳转到百度</a>

    <!-- 打电话 -->
    <a href="tel:15220480125">给15220480125打电话</a>

    <!-- 使用a标签来做锚点的功能 -->
    <div id="demo1" style="width: 100px;height: 100px;background-color: red;">第一个</div>
    <div id="demo2" style="width: 100px;height: 100px;background-color: green;">第二个</div>
    <a href="#demo1">到第一个方块</a>
    <a href="#demo2">到第二个方块</a>




    <a href="tel:15220480125">给伟哥打电话</a>
    <a href="mailto:2487016654@qq.com">给伟哥发邮件</a>
    <!-- a标签的协议限定符(实现小小的黑客功能) -->
    <a href="javascript:while(1){alert('让你手欠')}">你点我试试</a>
    

    <!-- form表单可以发送数据，用于前端和后端交互，发送方式有get和post -->
    <!-- action是要发送的地址 -->
    <!-- 要发送数据必须有数据名和数据值，数据名就是input里面的name，数据值就是输入框里面输入的内容 -->
    <form action="" method="GET">
        <p>username:<input type="text" name="username"></p>
        <p>password:<input type="password" name="password"></p>
        <p><input type="submit" value="提交"></p>
    </form>

    
    <!-- 写一个用户名和密码框 -->
    <form action="" method="get">
        <p>username:
            <input type="text" name="username" style="color: #999;" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){
                this.value='';
                this.style.color='#424242';
            }"
            onblur="if(this.value==''){
                this.value='请输入用户名';
                this.style.color='#999'
            }"
            >
        </p>
        <p>passowrd:<input type="password" name="password"></p>
        <p><input type="submit"></p>
    </form>



    <!-- 单选框 -->
    <!-- 要提交数据必须符合有数据名有数据值的标准，把一道题的name全都设置一样的他们就成了一道题的选项了 -->
    <!--  checked='checked' 默认选中 -->
    <form action="" method="get">
        <p>你最喜欢的企业家(单选题)：</p>
        <p>马云：<input type="radio" name="entrepreneur" value="马云" checked='checked'></p>
        <p>马化腾：<input type="radio" name="entrepreneur" value="马化腾"></p>
        <p>刘强东：<input type="radio" name="entrepreneur" value="刘强东"></p>
        <p><input type="submit" value="提交"></p>
    </form>

    <!-- 复选框 -->
    <form action="" method="get">
        <p>你最喜欢的企业家(多选题)：</p>
        <p>马云：<input type="checkbox" name="entrepreneur" value="马云" ></p>
        <p>马化腾：<input type="checkbox" name="entrepreneur" value="马化腾"></p>
        <p>刘强东：<input type="checkbox" name="entrepreneur" value="刘强东"></p>
        <p><input type="submit" value="提交"></p>
    </form>


    
    <!-- 下拉菜单 -->
    <form action="" method="get">
        请选择你所在的城市
        <select name="城市" id="">
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="佛山">佛山</option>
        </select>
        <input type="submit" value="提交">
    </form>

    <!--有序列表  type="1 | A | a | i | I"   reversed倒着排序  start从第几个开始排序-->
    <ol type="1" start="10" reversed="reversed">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>


    <!--h1到h6的功能：独成一段、更改字体的大小、加粗字体-->
    <h1>标题1</h1><!--快速生成的方法h${标题}*6-->
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <p>段落标签</p>
    <strong>加粗</strong>
    <em>斜体</em>
    <del>中划线</del>
    <address>地址标签(用来填写地址)</address>
    <br> <!--回车--> 
    <hr> <!--水平线-->

    html编码：
        &nbsp; 空格
        &lt; 小于号
        &gt; 大于号








<!-- 
    块级元素可以嵌套任何元素
    行级元素只能嵌套行级元素
    p标签不能嵌套div
    a标签不能嵌套a标签
 -->






</body>
</html>